<template>
 <div>
     <h2>分类的列表</h2>
     <table>
         <tr>
             <td>id</td>
             <td>名称</td>
             <td>操作</td>
         </tr>
         <tr v-for="i in authors">
             <td>{{i.id}}</td>
             <td>
                 <button @click="detaisl(i.id)">{{i.name}}</button>
                 </td>
             <td>
                 <button @click="delx(i.id)">删除</button>
             </td>
         </tr>
     </table>
     <button v-if="previous" @click="pagx(p-1)">上一页</button>
     <button v-for="i in page" @click="pagx(i)">{{i}}</button>
     <button v-if="next" @click="pagx(p+1)">下一页</button>
 </div>
</template>

<script>
 export default {
   data () {
     return {
         authors:[],
         p:1,
         previous:false,
         next:false,
         page:[],
     }
   },
   mounted(){
       this.axios({
           url:'http://127.0.0.1:8000/app01/cate/',
           method:'get',
           params:{"p":this.p}
       }).then(res=>{
           this.authors=res.data.data.data;
           this.page=res.data.data.page;
           this.previous=res.data.data.previous;
           this.next=res.data.data.next;
       })
   },
   
   methods:{
       pagx:function(p){
           this.p=p; 
            this.axios({
                url:'http://127.0.0.1:8000/app01/cate/',
                method:'get',
                params:{"p":this.p}
            }).then(res=>{
                this.authors=res.data.data.data;
                this.page=res.data.data.page;
                this.previous=res.data.data.previous;
                this.next=res.data.data.next;
            })
       },
       detaisl:function(id){
           this.$router.push({
               path:'/del',
               query:{"id":id}
           })
       },
       delx:function(id){
           let formdata=new FormData();
           formdata.append("id",id);
           this.axios({
               url:"http://127.0.0.1:8000/app01/cate/",
               method:"delete",
               data:formdata
           }).then(res=>{
               if (res.data.code==1000){
                    this.axios({
                        url:'http://127.0.0.1:8000/app01/cate/',
                        method:'get',
                        params:{"p":this.p}
                    }).then(res=>{
                        this.authors=res.data.data.data;
                        this.page=res.data.data.page;
                        this.previous=res.data.data.previous;
                        this.next=res.data.data.next;
                    })
               }else{
                   alert(res.data.msg);
               }
           })
       }
   }
 }
</script>

<style>
table{
    margin: 0 auto;
}
 
</style>
